// 物料组库
import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import {connect} from 'react-redux';
import actions from '../../store/actions/materialGroup';
import {Button, Input, Popconfirm, message, Drawer, Form} from 'antd';

import './Header.scss';

class Header extends Component {

  state = {
    drawerVisible: false,
    popVisible: false,
    materialCode: '',
    materialName: '',
    clickSource: ''  // 1：增加   2:修改   3: 删除
  };

  // 抽屉开始

  // 抽屉展开
  showDrawer = () => {
    this.setState({
      drawerVisible: true
    });
  };

  // 抽屉点击了关闭 或者取消
  onClose = () => {
    this.setState({
      materialCode: '',
      materialName: '',
      drawerVisible: false
    });
  };

  // 抽屉点击了确认

  handleOk = () => {


    const temp = this.state.clickSource === 2
      ? this.state.materialName
      : this.state.materialCode && this.state.materialName;

    if (temp) {
      const data = {
        pid: this.props.id,
        cate_title: this.state.materialName,
        cate_code: this.state.materialCode
      };

      console.log(data);

      switch (this.state.clickSource) {
        case 1:
          this.props.ADD_DATA(data);
          break;
        case 2:
          this.props.EDIT_DATA(data);
          break;
        default:
          console.log('未匹配到所选择按钮...');
      }

      this.setState({
        drawerVisible: false,
        materialCode: '',
        materialName: ''
      });

    } else {
      this.state.clickSource === 2
        ? message.error('存货名称 不能为空...')
        : message.error('存货编码 存货名称 不能为空...');
    }

  };

  // 抽屉结束

  // 物料组编码 改变
  materialCodeChanges = e => {
    this.setState({
      materialCode: e.target.value
    });
  };

  // 物料组名称改变
  materialNameChanges = e => {
    this.setState({
      materialName: e.target.value
    });
  };

  // 点击增加
  handleAdd = () => {
    console.log('增加');
    // 模态框显示
    this.setState({
      clickSource: 1,
      drawerVisible: true,
      materialCode: this.props.infoData.cate_code
    });
  };

  // 点击修改
  handleModify = () => {
    console.log('修改');
    this.setState({
      clickSource: 2,
      drawerVisible: true
    });
  };

  // 点击删除 开始
  // 需要判断是不是子节点
  // 气泡点击确认
  async confirm() {
    const pid = this.props.id;
    let {hasChild} = this.props;   // 判断有没有子节点
    if (!hasChild) {
      this.props.DEL_DATA(pid);
    } else {
      message.error('物料组包含子物料 不可删除...');
    }
    this.setState({
      popVisible: false
    });
  }


  // 气泡点击取消
  cancel = () => {
    this.setState({
      popVisible: false
    });
  };

  handleDel = () => {
    this.setState({
      clickSource: 3,
      popVisible: true
    });
  };

  // 点击删除结束

  regular = () => {
    this.state.materialCode = this.state.materialCode.replace(/[^\d]/g, '');
  };

  render() {
    const {cate_code, cate_title} = this.props.infoData;
    const {selectKey} = this.props;
    return (
      <div className='MaterialGroup__head'>
        <h3>物料组库</h3>
        <div className='MaterialGroup__head__btn'>
          <Button type="primary" onClick={this.handleAdd} disabled={selectKey}>增 加</Button>
          <Button type="dashed" onClick={this.handleModify} disabled={selectKey}>修 改</Button>
          {/*抽屉开始*/}
          <Drawer
            width={500}
            title="存货分类"
            placement="right"
            closable={true}
            onClose={this.onClose}
            visible={this.state.drawerVisible}
          >

            <Form className="drawer-form">

              <Form.Item label='物料组名称'>
                <Input
                  onChange={this.materialNameChanges}
                  value={this.state.materialName}
                  placeholder={this.state.clickSource === 2 ? cate_title : '请输入物料组名称'}
                />
              </Form.Item>

              <Form.Item label='物料组编码'>
                <Input
                  onChange={this.materialCodeChanges}
                  onInput={this.regular}
                  value={this.state.materialCode}
                  disabled={this.state.clickSource === 2}
                  placeholder={this.state.clickSource === 2 ? cate_code : '请输入物料组编码'}
                />
              </Form.Item>

              <Form.Item>
                <div id='drawer-form-buttons'>
                  <Button type="primary" className="drawer-form-button" onClick={this.onClose}>取 消</Button>
                  <Button type="danger" className="rawer-form-button" onClick={this.handleOk}>确 定</Button>
                </div>
              </Form.Item>

            </Form>
          </Drawer>
          {/*抽屉结束*/}

          {/*删除气泡开始*/}
          <Popconfirm
            visible={this.state.popVisible}
            placement="bottomRight"
            title="确定要删除该物料组么？"
            okText="确定"
            cancelText="取消"
            onConfirm={this.confirm.bind(this)}
            onCancel={this.cancel}
          >
            <Button type="danger" onClick={this.handleDel} disabled={selectKey}>删 除</Button>
          </Popconfirm>
          {/*删除气泡结束*/}

        </div>
      </div>
    );
  }
}

const mapStateToProps = state => {
  const {selectKey} = state.materialGroup;
  // 判断所选的节点是否有子节点
  let tempStr = state.materialGroup.selectKey.toString();
  let hasChild = tempStr.includes(',') ? false : true;
  return {
    selectKey: !selectKey,
    id: selectKey,
    hasChild
  };
};

export default connect(mapStateToProps, actions)(withRouter(Header));
